<template>
	<view class="text">
		<cu-custom bgColor="bg-gradual-pink" :isBack="true" :dataurl='dataurl'>
			<block slot="backText">返回</block>
			<block slot="content">商品详情</block>
		</cu-custom>
		<view class="cu-card dynamic" :class="isCard">
			<view class="cu-item shadow">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar round lg">
							<image :src="data.icon" mode="" class="img"></image>
						</view>
						<view class="content flex-sub">
							<view>{{data.name}}</view>
							<view class="flex justify-between">
								{{data.gentle}}
							</view>
						</view>
						<view>
							<button class="cu-btn round" :class="['bg-' + 'blue' ]" style="text-align: center;"
								@click="handlecar" v-if="!data.status">预约该车辆</button>
							<button class="cu-btn round" :class="['bg-' + 'blue' ]" style="text-align: center;"
								@click="consolecar" v-if="data.status">取消预约</button>
						</view>
					</view>
				</view>
				<view class="text-content">
					{{data.info}}
				</view>
				<view class="grid flex-sub padding-lr" :class="isCard?'col-3 grid-square':'col-1'">
					<view class="bg-img" :class="isCard?'':'only-img'">
						<swiper class="screen-swiper" :class="square-dot" :indicator-dots="true" :circular="true"
							:autoplay="true" interval="5000" duration="500">
							<swiper-item v-for="(item,index) in data.image" :key="index">
								<image :src="item" mode="aspectFill"></image>
								<video :src="item" autoplay loop muted :show-play-btn="false" :controls="false"
									objectFit="cover"></video>
							</swiper-item>
						</swiper>
						<!-- 					<image v-for="(item,index) in data.image" :key="index" :src="item" mode="">
						</image> -->
					</view>
				</view>
				<view class="text-gray text-sm text-right" style="padding: 30px 10px 0 0;">
					<view style="font-weight: 500;font-size: 20px;color: blue;">
						价格：{{data.price}}
					</view>
					<text class="cuIcon-attentionfill margin-lr-xs"></text> {{data.number}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isCard: false,
				id: '',
				number: 0,
				data: {

				},
				dataurl: ''
			};
		},
		onLoad: async function(option) { //option为object类型，会序列化上个页面传递的参数
			this.id = option.id
			this.dataurl = option.dataurl
			await this.getData()
			await this.addNumber()
			await this.getData()
		},
		methods: {
			async getData() {
				const id = this.id
				const res = await this.$https.get(`/heros/${id}`)
				this.data = res.data
			},
			async addNumber() {
				const id = this.id
				let that = this
				this.data.number = this.data.number + 1
				await that.$https.put(`/heros/${id}`, that.data)
			},
			async handlecar() {
				const id = this.id
				let that = this
				uni.showModal({
					title: '预约',
					content: '确定预约该车辆吗？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							that.data.status = 1
							that.$https.put(`/heros/${id}`, that.data).then(res => {
								that.getData()
								uni.showModal({
									title: '联系方式',
									content: `该发布者的联系方式是:${that.data.phone}`,
									confirmText: '确定',
									success: res => {}
								})
							})
						}
					}
				})
			},
			async consolecar() {
				const id = this.id
				let that = this
				uni.showModal({
					title: '预约',
					content: '确定取消预约该车辆吗？',
					cancelText: '再想想',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							that.data.status = 0
							that.$https.put(`/heros/${id}`, that.data).then(res => {
								that.getData()
							})
						}
					}
				})
			},
		},
		created() {
			// this.getData()
			// this.addNumber()
			// this.getData()
		}
	}
</script>

<style>
	.img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-size: cover;
		object-fit: cover;
		object-position: cover;
	}
</style>
